<template>
  <div id="app">
    <ewater-head></ewater-head>
    <router-view></router-view>
    <ewater-foot></ewater-foot>
    <to-top></to-top>
  </div>
</template>

<script>
import ewaterFoot from './components/footer.vue'
import ewaterHead from './components/header.vue'
import toTop from './components/toTop.vue'
export default {
  name: 'app',
  components: {
    ewaterHead,
    ewaterFoot,
    toTop
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media screen and (min-width:1440px) and (max-width:1330px) and (orientation:portrait) {
    body { font-size: 125%; }
}
@media screen and (min-width:1330px) and (max-width:1250px) and (orientation:portrait) {
    body { font-size: 115%; }
}
body {
  position: relative;
}
html {
  font-size: 115%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
}
.content {
  width: 80%;
  margin: 0 auto;
}
a {
  color: #000000;
  text-decoration: none;
}
li {
  list-style: none;
}
.title, .brif {
  text-align: center;
  color: rgb(44,62,80);
}
.title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  padding-top: 50px;
}
.brif {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-top: 5px;
  margin-bottom: 30px;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
.newsLists > ul {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  height: 1.6rem;
  line-height: 1.6rem;
  border-bottom: 1px dotted #cccccc;
}
.newsLists {
  padding: 0 1rem 5rem 2rem;
}
.newsLists li {
  width: 28rem;
  font-weight: 500;
  color: #000000;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
}
.newsLists span {
  font-size: 0.8rem;
  display: inline-block;
  color: #aaaaaa;
}
.pitch {
  background-color: #11a2d0;
}
</style>
